<template>
	<div class="article">
		<el-dialog :modal="false" :title="title + '文章'" :visible.sync="dialogVisible" :close-on-click-modal="false" fullscreen @closed="resetForm('form')">
			<span slot="title">
				<el-row :gutter="20" type="flex" justify="space-between">
					<el-col :span="2">
						<span>{{ title + '文章' }}</span>
					</el-col>
					<el-col :span="4">
						<div class="handle-btn">
							<el-button type="success" v-preventReClick @click="handlePreview()" size="mini" plain>预 览</el-button>
							<el-button type="primary" v-preventReClick @click="submitForm('form', 0)" size="mini" plain>暂 存</el-button>
							<el-button type="primary" v-preventReClick @click="submitForm('form', 1)" size="mini">提交审核</el-button>
						</div>
					</el-col>
				</el-row>
			</span>
			<div class="article-wrap">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px" size="small">
					<div class="box1">
						<el-card class="box-card article-info">
							<el-row :gutter="20">
								<el-col :span="20">
									<div class="article-basic">
										<el-col :span="18">
											<el-form-item label="文章标题" prop="title">
												<el-input v-model.trim="form.title" clearable maxlength="50" show-word-limit></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="6">
											<el-checkbox-group v-model="titleArr">
												<el-checkbox label="1">引题</el-checkbox>
												<el-checkbox label="2">副标题</el-checkbox>
											</el-checkbox-group>
										</el-col>
										<el-col :span="18" v-show="titleArr.indexOf('1') != -1">
											<el-form-item label="引题">
												<el-input v-model.trim="form.citeTitle" clearable></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="18" v-show="titleArr.indexOf('2') != -1">
											<el-form-item label="副标题">
												<el-input v-model.trim="form.subTitle" clearable></el-input>
											</el-form-item>
										</el-col>
										<div style="clear: both"></div>
										<el-col :span="6">
											<el-form-item label="责任编辑">
												<el-input v-model.trim="form.executiveEditor" clearable></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="栏目" prop="classifyId">
												<el-select v-model="form.classifyId" placeholder="栏目" clearable>
													<el-option v-for="item in classifyData" :key="item.id" :label="item.name" :value="item.id"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<div style="clear: both"></div>
										<el-col :span="6">
											<el-form-item label="作者1">
												<el-input v-model.trim="form.author1" clearable></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="作者1单位">
												<el-input v-model.trim="form.author1Dept" clearable></el-input>
											</el-form-item>
										</el-col>
										<div style="clear: both"></div>
										<el-col :span="6">
											<el-form-item label="作者2">
												<el-input v-model.trim="form.author2" clearable></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="作者2单位">
												<el-input v-model.trim="form.author2Dept" clearable></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="6">
											<el-button type="text" :icon="show2 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="show2 = !show2">
												{{ show2 ? '收起' : '显示更多' }}
											</el-button>
										</el-col>
										<div style="clear: both"></div>
										<transition name="el-zoom-in-top">
											<div v-show="show2" class="transition-box">
												<el-col :span="6">
													<el-form-item label="作者3">
														<el-input v-model.trim="form.author3" clearable></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="12">
													<el-form-item label="作者3单位">
														<el-input v-model.trim="form.author3Dept" clearable></el-input>
													</el-form-item>
												</el-col>
												<div style="clear: both"></div>
												<el-col :span="6">
													<el-form-item label="作者4">
														<el-input v-model.trim="form.author4" clearable></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="12">
													<el-form-item label="作者4单位">
														<el-input v-model.trim="form.author4Dept" clearable></el-input>
													</el-form-item>
												</el-col>
												<div style="clear: both"></div>
												<el-col :span="6">
													<el-form-item label="作者5">
														<el-input v-model.trim="form.author5" clearable></el-input>
													</el-form-item>
												</el-col>
												<el-col :span="12">
													<el-form-item label="作者5单位">
														<el-input v-model.trim="form.author5Dept" clearable></el-input>
													</el-form-item>
												</el-col>
											</div>
										</transition>
										<el-col :span="18">
											<el-form-item label="附件" prop="newsType">
												<el-button type="primary" size="small" @click="handleUploadPdf">上传PDF文件</el-button>
											</el-form-item>
										</el-col>
									</div>
								</el-col>
							</el-row>
							<div class="cover-wrap">
								<ImgCropper ref="ImgCropper" :props="defaultProps" v-if="dialogVisible" @e-emit="setCoverImgId" />
							</div>
						</el-card>
						<el-card style="margin-top: 10px">
							<el-row :gutter="20">
								<!-- <el-col :span="24">
                  <el-form-item label="资源类型" prop="newsType">
                    <el-radio-group v-model="form.newsType">
                      <el-radio label="1">文章</el-radio>
                      <el-radio label="2">外链</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col> -->
								<el-col :span="24" v-if="form.newsType == 1">
									<el-form-item label="正文" prop="content">
										<UEditor
											ref="ueditor"
											:ueHeight="1200"
											:ueWidth="1000"
											:defaultMsg="form.content"
											:clear="dialogVisible"
											v-if="dialogVisible"
										/>
									</el-form-item>
								</el-col>
								<div v-else>
									<el-col :span="18">
										<el-form-item label="外链地址" prop="linkAddr">
											<el-input v-model.trim="form.linkAddr" clearable></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="6">
										<p class="txt-explain">链接地址必须以http://或https://开头</p>
									</el-col>
								</div>
							</el-row>
						</el-card>
					</div>
					<div class="box2">
						<el-collapse v-model="activeNames">
							<el-collapse-item title="基本属性" name="1">
								<el-form-item label="发布时间" prop="pubDate">
									<el-date-picker
										v-model="form.pubDate"
										type="date"
										value-format="yyyy-MM-dd"
										placeholder="选择发布时间"
										:clearable="false"
										style="width: 100%"
									></el-date-picker>
								</el-form-item>
								<!-- <el-form-item label="排序">
                  <el-input-number
                    v-model="form.orderBy"
                    :min="1"
                    :max="1000"
                    size="small"
                    label="排序"
                  ></el-input-number>
                </el-form-item> -->
								<el-form-item label="点击数">
									<el-input-number v-model="form.clickCount" :min="0" :max="999999" size="small" label="点击数"></el-input-number>
								</el-form-item>
							</el-collapse-item>
							<!-- <el-collapse-item title="其他设置" name="2">
                <div>控制反互动效让用户可以清晰的感知自己的操作；</div>
              </el-collapse-item> -->
						</el-collapse>
					</div>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import moment from 'moment';
import userInfo from '@/mixins/userInfo.js';
import { mapGetters } from 'vuex';
import classifySelect from './classifySelect';
export default {
	mixins: [userInfo, classifySelect],
	components: {
		ImgCropper: () => import('@/components/imgCropper'),
		UploadFile: () => import('@/components/uploadFile/index.vue')
	},
	data() {
		return {
			show2: false,
			activeNames: ['1'],
			title: '新增',
			dialogVisible: false,
			titleArr: [],
			articleMore: true,
			drawOutline: false,
			form: {
				title: '', //标题
				subTitle: '', //副标题
				citeTitle: '', //副标题
				// status: '1', //状态0-发布，1-未发布
				status: '0', //状态;0-未发布，1-已发布
				auditStatus: '0', //审核状态;0-暂存，1-待审核，2-审核通过，3-不通过
				author: '', //作者
				editor: '', //编辑
				photography: '', //摄影
				auditor: '', //审核
				executiveEditor: '', //责任编辑
				clickCount: '0', //点击数
				content: '', //内容
				source: '', //来源
				pubDate: '', //发布时间
				outline: '', //概要
				fileIds: [], //附件id数组
				orderBy: 10,
				coverPicture: '', //封面图
				newsType: '1', //类型
				linkAddr: '', //外链地址
				journalId: '',
				author1: '',
				author1Dept: '',
				author2: '',
				author2Dept: '',
				author3: '',
				author3Dept: '',
				author4: '',
				author4Dept: '',
				author5: '',
				author5Dept: '',
				type1: 2 //1.文章  2.书籍
			},
			rules: {
				title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
				author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
				pubDate: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
				newsType: [{ required: true, message: '请选择资源类型', trigger: 'blur' }],
				content: [{ required: true, message: '请输入正文', trigger: 'blur' }],
				linkAddr: [{ required: true, message: '请输入外链地址', trigger: 'blur' }],
				classifyId: [{ required: true, message: '请选择栏目', trigger: 'change' }]
			},
			props: {
				children: 'childList',
				label: 'name',
				value: 'id',
				expandTrigger: 'click',
				emitPath: false,
				multiple: true,
				checkStrictly: true,
				disabled: 'disable'
			},
			fileList: [], //返回附件信息
			// tbSysAttachment: null, //返回封面图信息
			defaultProps: {
				defaultValue: null,
				type: 1, //1. 文章封面 2. 书籍封面
				button: ['upload', 'fromNetDisk', 'cancel']
			}
		};
	},
	props: ['journalId'],
	computed: mapGetters(['columnData']),
	mounted() {
		this.$bus.$on('showDialogNewsContentsAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('showDialogNewsContentsAdd');
	},
	methods: {
		//显示弹窗
		init(row) {
			this.titleArr = [];
			this.drawOutline = false;
			this.defaultProps.defaultValue = null;
			this.fileList = [];
			this.form = this.$options.data().form;
			if (row) {
				this.form = { ...this.form, ...row };
				this.$set(this.form, 'id', row.id);
				this.titleArr = [this.form.subTitle ? '1' : '', this.form.outline ? '2' : ''];
				this.form.pubDate = moment(this.form.pubDate).format('YYYY-MM-DD');
				this.form.content = this.form.content.replace('div', 'p');
				this.defaultProps.defaultValue = row.httpUrl || null;
				this.fileList = row.fileList || [];
				if (this.fileList.length) {
					let str = '';
					this.fileList.forEach((v) => {
						str += `<iframe style="width: 100%;height: 1000px;border: 0px;overflow: hidden" width="100%" height="1000px" src="${v.httpUrl}?fileId=${v.id}"></iframe>`;
					});
					this.form.content = `<p>${str}</p>`;
				}
				//类型
				if (this.form.classifyIds.length) {
					this.form.classifyId = this.form.classifyIds[0];
				}
			} else {
				this.form.journalId = this.journalId;
				this.form.author = '';
				this.form.pubDate = moment(new Date()).format('YYYY-MM-DD');
				this.$delete(this.form, 'id');
			}
			this.title = row ? '编辑' : '新增';
			this.dialogVisible = true;
		},
		submitForm(form, auditStatus) {
			this.form.status = 0;
			this.form.auditStatus = auditStatus;
			this.form.citeTitle = this.titleArr.indexOf('1') != -1 ? this.form.citeTitle : '';
			this.form.subTitle = this.titleArr.indexOf('2') != -1 ? this.form.subTitle : '';
			this.form.pubDate = moment(this.form.pubDate).format('YYYY-MM-DD');
			if (this.form.newsType == 1) {
				this.form.linkAddr = '';
				this.form.content = this.$refs.ueditor.message;
				//提取ueditor中PDF的文件id
				let str = this.form.content;
				if (!str || str.indexOf('fileId=') == -1) {
					this.warnMsg('请上传PDF');
					return;
				}
				let attrAndValueArr = str.match(/fileId=(.*?)\"/g);
				let valueArr = [];
				for (let i = 0; i < attrAndValueArr.length; i++) {
					valueArr.push(attrAndValueArr[i].replace(/fileId=/g, '').replace(/\"/g, ''));
				}
				this.form.fileIds = valueArr;
			} else {
				this.form.content = '';
			}
			if (this.form.classifyId) {
				this.form.classifyIds = [this.form.classifyId];
			}
			this.$refs[form].validate(async (valid) => {
				if (valid) {
					let dispatchType = this.title == '新增' ? 'addNewsContents' : 'updateNewsContents';
					let res = await this.$store.dispatch(dispatchType, this.form);
					auditStatus == 0 ? this.done() : this.flowSubmit(res.data[0]);
				}
			});
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('refreshNewsContentsList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		//提交审核
		async flowSubmit(row) {
			let obj = {
				businessData: JSON.stringify(row), //业务数据 json字符串
				businessKey: row.id, //资源id
				definitionCode: 1, //1.书籍审核 2.新闻审核
				scope: 1
			};
			await this.$store.dispatch('submitFlowApi', [obj]);
			this.done();
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		},
		setCoverImgId(v) {
			// 上传的图片传文件id，否则传图片地址
			if (typeof v === 'object') {
				this.form.coverPicture = v.id;
			} else {
				this.form.coverPicture = v;
			}
		},
		//预览
		handlePreview() {
			if (this.form.newsType == 1) {
				this.form.content = this.$refs.ueditor.message;
				if (!this.form.title || !this.form.content) {
					this.warnMsg('标题和正文不能为空');
					return;
				}
				this.$bus.$emit('collectLogPreview', this.form);
			} else {
				let urlReg = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/;
				if (urlReg.test(this.form.linkAddr)) {
					window.open(this.form.linkAddr);
				} else {
					this.warnMsg('请输入正确的网站地址');
				}
			}
		},
		handleUploadPdf() {
			document.getElementsByClassName('edui-for-attachment')[0].children[0].children[0].children[0].click();
		}
	}
};
</script>
<style scoped lang="scss">
.article-wrap {
	position: relative;
	.box1 {
		width: calc(100% - 350px);
	}
	.box2 {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 330px;
		// height: 800px;
		background: #fff;
		padding: 10px 20px;
		box-sizing: border-box;
	}
}
.article-info {
	position: relative;
	transition: all 0.5s;
	.article-more-btn {
		position: absolute;
		right: -27px;
		bottom: -27px;
		cursor: pointer;
		width: 100px;
		height: 60px;
		background: #1a9c03;
		color: #fff;
		text-align: center;
		transform: rotate(-35deg);
	}
	.cover-wrap {
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.article-more-content {
		clear: both;
	}
}
</style>
<style scoped>
.article >>> .el-dialog {
	background: #aaa;
}
.article >>> .el-dialog__header {
	padding: 10px 20px;
	background: #fff;
}
.article >>> .el-dialog__header .el-dialog__headerbtn {
	top: 14px;
	padding: 4px 5px;
	border-radius: 3px;
	background: #930b0b;
}
.article >>> .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
	color: #fff;
	display: block;
}
.article >>> .el-dialog__body {
	padding: 10px 20px;
	max-height: unset;
	border-top: 1px solid #ddd;
}
.cover-wrap >>> .cover-img {
	right: 50px;
}
</style>
